<template>
  <div>
    <div class="search-container">
      <el-form ref="searchRef" :inline="true">
        <el-form-item label="人员姓名">
          <el-input v-model="projectName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker style="margin-left: 10px;" v-model="value1" type="date" placeholder="" />

        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary" style="margin-left: 10px;">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-container">
      <div style="display: flex;">
        <el-button type="primary" @click="dialogVisible = true; projectName11 = ''; projectName12 = '';">新增</el-button>
        <el-button type="primary" style="margin-left: 20px;">删除</el-button>
      </div>
      <el-table :data="scantableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" label="送测工作组人员" />
        <el-table-column prop="name1" label="咨询信息" />
        <el-table-column prop="name2" label="创建人" />
        <el-table-column prop="name3" label="创建时间" />
        <el-table-column prop="" label="操作" width="250">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openDiagle(scope.row)">
              编辑
            </el-button>
            <el-button type="primary" style="margin-left: 10px;" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
        <el-pagination background layout="prev, pager, next, jumper" :total="2" />
      </div>

      <el-dialog v-model="resultdialogVisible" label-width="150" title="查看结果" width="800">
        <div>
          <el-form ref="searchRef" :inline="true">
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="检测文件名称">
                  <div>检测文件名称</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="匹配文件名称">
                  <div>匹配文件名称</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="文件大小检测">
                  <div>80M</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文件后缀检测">
                  <div>.dat</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="文件个数">
                  <div>116</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文件头">
                  <div>16</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="版本">
                  <div>2.0</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="同频率">
                  <div>98%</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="行数">
                  <div>98</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="容量">
                  <div>316kb</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="楼栋分布">
                  <div>--</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="许可证">
                  <div>--</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <div>2024-6-06 14:32:12</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resultdialogVisible = false">取消</el-button>
            <el-button type="primary" @click="resultdialogVisible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <el-dialog v-model="dialogVisible" title="新增">
      <el-form ref="searchRef" label-width="150">
        <el-row>
          <el-col :span="12">
            <el-form-item label="送测工作组人员">
              <el-input v-model="projectName11" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询信息">
              <el-input v-model="projectName12" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="负责人联系方式">
              <el-input v-model="projectName13" style="width: 240px;"></el-input>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
const resultdialogVisible = ref(false)
const projectName = ref('')
const value1 = ref('')
const projectName2 = ref('')
const scantableData = ref([{
  index: '李飞',
  name1: '效果好不好',
  name2: 'admin',
  name3: '2022-01-19 10:37',
  name4: '.dat',
  name5: '546',
  name6: '0x18',
  name7: '1.0',
  name8: '96%',
  name9: '145',
  name10: '326kB',
  name11: '2022-01-19 10:37',
  name12: '成功',
}])

const dialogVisible = ref(false);
const projectName11 = ref('')
const projectName12 = ref('')
const projectName13 = ref('')
const projectName14 = ref('')
const projectName15 = ref('')
const openDiagle = (item) => {
  dialogVisible.value = true;
  projectName11.value = item.index;
  projectName12.value = item.name1;

}

</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}
</style>